import React, { Component } from "react";
import { connect } from "react-redux";
import "./BankDetail.scss";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { Toast, List, Modal } from "antd-mobile";
import { createForm } from "rc-form";
import copy from "copy-to-clipboard";
import yhTools from "../../../../tools/yh";
import { InterfaceG, channelCode } from "../../../../config/Config";
// import {ThemeDefault, ThemeLife} from '../../../../tools/theme';

const Item = List.Item;
const prompt = Modal.prompt;

class BankDetail extends Component {
	constructor(props) {
		super(props);
		this.alert1 = null;
		this.alert2 = null;
		this.state = {
			showAmt: false, //是否显示真实金额
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			pageParams: {}, //JSON.parse(this.props.match.params.data),
			idCardInfoTip: "", //身份证信息提示语
			servicePhone: "400-8219-666", //客服电话
			changeBankCardTip: "只有在账户余额和持仓均为0的情况下才可以更换绑定卡哦", //切换银行卡提示语
			huaTongBankTip:
				"华通银行电子账户是电子化的个人银行Ⅱ类账户，目前在永辉金融平台上主要用于华通银行旗下的产品交易，资金交易安全有保障。", //华通银行电子账户说明
			invotationCode: "", //推荐码
			initData: sessionStorage.getItem("bankDetailData")
				? JSON.parse(sessionStorage.getItem("bankDetailData"))
				: {
						amount: "", //账户余额
						bankName: "", //银行名称
						electronicCardNoHide: "", //	隐藏的电子卡号
						electronicCardNo: "", //	电子卡号
						cardNo: "", //绑定的银行卡号
						telNo: "", //预留手机号
						status: "0", //0-已上传 1-信息过期 2-审核未过
						channelName: "", //渠道名称
						channelCode: "" //渠道编号
				  }
		};
	}

	//初始化数据
	componentDidMount() {
		let objs = {
			url: InterfaceG.electronicAccount,
			params: {
				channelCode: channelCode
			},
			_alertShow: false
		};
		// Toast.loading("加载中...", 100, null);
		yhTools.request(objs).then(resp => {
			console.log(resp);
			Toast.hide();
			if (resp.code == "0") {
				sessionStorage.setItem("bankDetailData", JSON.stringify(resp.data));
				this.setState(
					{
						initData: resp.data,
						invotationCode: resp.data.invitationCode
					},
					() => {
						if (this.state.initData.status == 0) {
							this.setState({
								idCardInfoTip: "已上传"
							});
						} else if (this.state.initData.status == 1) {
							//TODO 暂时没开放
							this.setState({
								idCardInfoTip: "信息过期"
							});
						} else {
							this.setState({
								idCardInfoTip: "审核失败"
							});
						}
					}
				);
			} else {
				Toast.info(resp.message, 2);
			}
		});
		yhTools.clearPageCache(); // 清除页面缓存
	}
	componentWillUnmount() {
		if (this.alert1) {
			this.alert1.close();
		}
		if (this.alert2) {
			this.alert2.close();
		}
	}

	openMoneyOperate(type) {
		let pageParams;
		switch (type) {
			case 1: //提现
				if (Number(this.state.initData.amount) <= 0) {
					Toast.info("账户余额为0，请充值！");
					return;
				}
				pageParams = {
					url: `/walletHome`
				};
				break;
			case 2: //提现
				if (Number(this.state.initData.amount) <= 0) {
					Toast.info("账户余额为0，无法提现");
					return;
				}
				pageParams = {
					url: `/withdrawAccount`
				};
				break;
			case 3: //充值
				// pageParams = {
				//     url: `/rechargeAccount?from=bankDetail`
				// };
				break;
			default:
				break;
		}
		if (type === 3) {
			// 充值
			this.props.history.push(`/rechargeAccount?from=bankDetail`);
		} else {
			this.props.history.push({
				pathname: pageParams.url
			});
		}
	}

	//复制内容
	copyContent() {
		copy(this.state.initData.electronicCardNo);
		Toast.info("复制成功", 2);
	}

	goToPage(type) {
		let pageParams = {
			type: "0", //0:打开页面，1:其他操作
			url: "" //页面地址
		};
		switch (type) {
			case 0: //账单记录
				pageParams = {
					type: "0",
					url: `/billRecord/${2}`
				};
				break;
			case 1: //绑定银行卡
				Modal.alert("", this.state.changeBankCardTip, [
					{
						text: "取消",
						onPress: () => {}
					},
					{
						text: "更换绑定卡",
						onPress: () => {
							pageParams = {
								type: "1",
								url: `/replaceBankCard/${channelCode}`
							};
							this.props.history.push({
								pathname: pageParams.url
							});
							return;
						}
					}
				]);
				break;
			case 3: //TODO 待开放--证件信息
				pageParams = {
					type: "0",
					url: `/modifyIDCardImgPage`
				};
				break;
			case 4: //查看完整卡号
				this.alert1 = Modal.alert("", this.state.initData.electronicCardNo, [
					{ text: "取消", onPress: null },
					{ text: "复制卡号", onPress: this.copyContent.bind(this) }
				]);
				break;
			case 5: //联系客服
				yhTools
					.callPhone({
						telphone: this.state.servicePhone
					})
					.then(
						() => {},
						() => {
							// if (resp.status == "3001") {
							//     Modal.alert("权限提醒", "", [
							//         { text: '我知道了', onPress: null }
							//     ]);
							// }
						}
					);
				break;
			case 6: //关于华通银行
				this.alert2 = Modal.alert(
					"华通银行电子账户说明",
					this.state.huaTongBankTip,
					[{ text: "我知道了", onPress: null }]
				);
				break;
			case 7: //我的推荐码
				this.inviterEvent();
				break;
			default:
				break;
		}

		if (pageParams.type == "0") {
			this.props.history.push({
				pathname: pageParams.url
			});
		} else {
			//TODO 其他操作
		}
	}

	/**
	 * 我的邀请人
	 */
	inviterEvent() {
		if (this.state.invotationCode) {
			return;
		}
		let _that = this;
		prompt("", "请输入邀请人编码", [
			{ text: "取消" },
			{
				text: "确认添加",
				onPress: value => {
					if (value.length == 0) {
						Toast.info("输入内容不能为空", 2);
						return;
					}
					let objs = {
						url: InterfaceG.addInvitationCode,
						params: {
							invotationCode: value,
							channelCode: channelCode
						}
					};
					yhTools.request(objs).then(resp => {
						if (resp.code == "0") {
							_that.setState({
								invotationCode: value
							});
							Toast.info("添加成功！", 2);
						} else {
							Toast.info(resp.message, 2);
						}
					});
				}
			}
		]);
	}
	handleShowAmt = () => {
		this.setState({
			showAmt: !this.state.showAmt
		});
	};
	render() {
		const { statePrame = {} } = this.props.location.state || {};
		const { backPath } = statePrame;
		console.log("backPath===", backPath);
		const headerParams = {
			header: {
				title: "电子账户"
				// goBackPath: backPath || "/xhbBalanceAccountOpened"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};

		return (
			<MainLayout pageParams={headerParams}>
				<div className="bank-detail-page font28">
					<div className="account-content">
						{/* <div className="account-area">
                            <div className="line-1">
                                <div className="item">
                                    电子账户（元）
                                </div>
                            </div>
                            <div className="line-2">
                                <div className="item">
                                    {this.state.initData.amount}
                                </div>
                                <div className="item d-p">
                                    <div className="item-t" onClick={this.openMoneyOperate.bind(this, 1)}>买小辉宝</div>
                                </div>
                            </div>
                        </div> */}
						<div className="bank-detail">
							<span className="bank-no">
								…. …. ….{" "}
								{this.state.initData.electronicCardNo.slice(
									this.state.initData.electronicCardNo.length - 4
								)}
							</span>
							<p>
								账户余额(元) :
								<span>
									{this.state.showAmt ? this.state.initData.amount : "*****"}
								</span>
								{this.state.showAmt ? (
									<img
										src={require("../../../../images/imageXHB/eye-line.png")}
										alt=""
										onClick={this.handleShowAmt}
									/>
								) : (
									<img
										src={require("../../../../images/imageXHB/eye-off-line.png")}
										alt=""
										onClick={this.handleShowAmt}
									/>
								)}
							</p>
						</div>
						{/* <div className="money-area">
                            <ThemeDefault>
                                <div className="money-area-item t-1" onClick={this.openMoneyOperate.bind(this, 2)}>提现</div>
                            </ThemeDefault>
                            <ThemeLife>
                                <div className="money-area-item t-1" style={{background:'rgba(248,38,45,0.15)'}} onClick={this.openMoneyOperate.bind(this, 2)}>提现</div>
                            </ThemeLife>
                            <div className="money-area-item t-2" onClick={this.openMoneyOperate.bind(this, 3)}>
                                充值
                            </div>
                        </div> */}
						<div className="opraton">
							<div
								className="money-box"
								onClick={this.openMoneyOperate.bind(this, 3)}
							>
								<img
									className="money-icon"
									src={require("../../../../images/imageXHB/money-cny-circle-fill.png")}
									alt=""
								/>
								<span>去充值</span>
								<img
									className="next"
									src={require("../../../../images/imageXHB/icon-next-arrow.png")}
									alt=""
								/>
							</div>
							<div className="xian"></div>
							<div
								className="money-box"
								onClick={this.openMoneyOperate.bind(this, 2)}
							>
								<img
									className="money-icon"
									src={require("../../../../images/imageXHB/wallet-3-fill.png")}
									alt=""
								/>
								<span>去提现</span>
								<img
									className="next"
									src={require("../../../../images/imageXHB/icon-next-arrow.png")}
									alt=""
								/>
							</div>
						</div>
					</div>
					<div className="count-info-area">
						<List>
							<Item arrow="horizontal" onClick={this.goToPage.bind(this, 0)}>
								收支明细
							</Item>
							<Item
								arrow="empty"
								extra={
									this.state.initData.bankName +
									"(" +
									this.state.initData.cardNo.slice(
										this.state.initData.cardNo.length - 4
									) +
									")"
								}
								// onClick={this.goToPage.bind(this, 1)}
							>
								绑定银行卡
							</Item>
							<Item
								arrow={
									this.state.initData.status == "0" ? "empty" : "horizontal"
								}
								extra={this.state.idCardInfoTip}
								onClick={
									this.state.initData.status == "0"
										? null
										: this.goToPage.bind(this, 3)
								}
							>
								证件信息
								<div
									className={
										this.state.initData.status == "0"
											? "card-tip area-un-show"
											: "card-tip"
									}
								>
									需补传
								</div>
							</Item>
							<Item arrow="horizontal" onClick={this.goToPage.bind(this, 4)}>
								查看完整卡号
							</Item>
							<Item
								arrow="horizontal"
								extra={this.state.invotationCode}
								onClick={this.goToPage.bind(this, 7)}
							>
								我的推荐码
							</Item>
						</List>
						<List>
							<Item
								arrow="horizontal"
								extra={this.state.servicePhone}
								onClick={this.goToPage.bind(this, 5)}
							>
								联系客服
							</Item>
							<Item
								arrow="horizontal"
								extra="电子账户说明"
								onClick={this.goToPage.bind(this, 6)}
							>
								关于华通银行
							</Item>
						</List>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const BankDetailPage = connect(mapStateToProps, mapDispatchToProps)(BankDetail);
export default createForm()(BankDetailPage);
